{% extends "base.html" %}

{% block title %}重置密码 - 交易监控系统{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header bg-warning text-white">
                    <h2 class="mb-0"><i class="fas fa-key me-2"></i>重置密码</h2>
                </div>
                <div class="card-body">
                    {% if error %}
                    <div class="alert alert-danger" role="alert">
                        {{ error }}
                    </div>
                    {% endif %}
                    
                    {% if success %}
                    <div class="alert alert-success" role="alert">
                        密码重置成功！
                    </div>
                    {% endif %}
                    
                    <form method="post" action="/admin/users/reset_password/{{ user.id }}" autocomplete="off">
                        <div class="mb-4">
                            <label for="new_password" class="form-label fw-bold">
                                新密码
                            </label>
                            <div class="input-group">
                                <span class="input-group-text"></span>
                                <input type="password" class="form-control" id="new_password" name="new_password" required autocomplete="new-password">
                                <button class="btn btn-outline-secondary toggle-password" type="button" data-target="new_password">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <label for="confirm_password" class="form-label fw-bold">
                                确认新密码
                            </label>
                            <div class="input-group">
                                <span class="input-group-text"></span>
                                <input type="password" class="form-control" id="confirm_password" name="confirm_password" required autocomplete="new-password">
                                <button class="btn btn-outline-secondary toggle-password" type="button" data-target="confirm_password">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-between mt-4">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i> 保存
                            </button>
                            <button type="button" class="btn btn-outline-secondary" onclick="window.location.href='/admin/users'">
                                <i class="fas fa-times me-1"></i> 取消
                            </button>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 清空密码输入框
        document.getElementById('new_password').value = '';
        document.getElementById('confirm_password').value = '';
        // 密码显示/隐藏功能
        const toggleButtons = document.querySelectorAll('.toggle-password');
        
        toggleButtons.forEach(button => {
            button.addEventListener('click', function() {
                const targetId = this.getAttribute('data-target');
                const passwordInput = document.getElementById(targetId);
                
                if (passwordInput.type === 'password') {
                    passwordInput.type = 'text';
                    this.innerHTML = '<i class="fas fa-eye-slash"></i>';
                } else {
                    passwordInput.type = 'password';
                    this.innerHTML = '<i class="fas fa-eye"></i>';
                }
            });
        });
    });
</script>
{% endblock %}